<template>
  <div class="achievement">
    <div class="achievement-header clearfix">
      <span class="fontSty" v-if="type == 2">季度</span>
      <span class="fontSty" v-if="type == 3">年度</span>
      <ul class="item fl" v-if="type == 1">
        <li
          v-for="(item, index) in items"
          :key="index"
          @click="selectItem(item.type,index,item.year)"
        >
          <span :class="[current == index ? 'cur' : '']">{{item.name}}</span>
        </li>
      </ul>
      <ul class="date fr" @click="showData">
        <li class="date_time" :class="info=='按条件查询'?'':'active'">
          <span>{{info}}</span>
          <svg-icon icon-class="icon_right" class="date-hide"></svg-icon>
        </li>
      </ul>
    </div>
    <div class="achievement-content">
      <h2
        v-show="isShow"
        style="text-align: center;color: #666;font-size: 15px; line-height: 40px;"
      >截止到昨天</h2>
      <ul class="lists">
        <li
          @click="Jump('dhsGljDetailDz',{type:type,current: current,year:currentYear,month:currentMonth, quarter: currentQuarter})"
          class="list"
        >
          <span class="fl">个人团队总业绩(元)</span>
          <span class="fr commission-number2">
            {{total_amount||'0.00'}}
            <br />
            <i>(已过滤虚拟库存出库订单)</i>
          </span>
        </li>
        <li
          @click="Jump('dhsGljDetailDz',{type:type,current: current,year:currentYear,month:currentMonth, quarter: currentQuarter})"
          class="list"
        >
          <span class="fl">团队管理总业绩(元)</span>
          <span class="fr commission-number2">
            {{total_level_amount||'0.00'}}
            <br />
            <i>(已过滤虚拟库存出库订单)</i>
          </span>
        </li>
        <li
          @click="Jump('dhsGljDetailDz',{type:type,current: current,year:currentYear,month:currentMonth,quarter: currentQuarter})"
          class="list"
        >
          <span class="fl">平推团队数量(个)</span>
          <span class="fr">{{level_count||0}}</span>
        </li>
      </ul>
    </div>
    <date-pop
      @cancel="cancelTime"
      @confirm="selectTime"
      :current="type"
      v-if="show_date"
      :timeData="timeData"
    ></date-pop>
  </div>
</template>

<script>
import Vue from 'vue'
import 'vant/lib/index.css'
import { Popup } from 'vant'
import datePop from '@/views/user/components/datePop'
import { getDhsGlj } from '@/api/user/dhs/dhsApi'
Vue.use(Popup)
export default Vue.extend({
  data() {
    return {
      current: 3,
      show_date: false,
      currentYear: '',
      currentMonth: '',
      currentQuarter: '',
      group_link: null,
      commission: null,
      type: '',
      isShow: true,
      lower_level_user_num: '',
      reward: '',
      items: [],
      timeData: {},
      info: '按条件查询',
      personal_consume: '',
      is_cxsw_dz: 0,
      total_amount: '', // 业绩
      total_level_amount: '', // 平级业绩
      level_count: '' // 平级数量
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getTime()
      this.getDhsGlj()
    },
    selectItem(type, index, year) {
      this.current = index
      this.currentYear = year
      this.currentMonth = type
      this.timeData.currentMonth = type
      if (this.month == type) {
        this.isShow = true
      } else {
        this.isShow = false
      }
      this.getDhsGlj()
      this.info = '按条件查询'
    },
    selectTime(e) {
      this.currentYear = e.selectYear
      this.currentMonth = e.selectMonth
      this.currentQuarter = e.selectQuarter
      this.timeData.currentYear = e.selectYear
      this.timeData.currentMonth = e.selectMonth
      this.timeData.currentQuarter = e.selectQuarter
      // this.current = -1;
      this.getDhsGlj()
      if (this.type == 1) {
        this.info = this.currentYear + '年' + this.currentMonth + '月'
        if (this.month == this.currentMonth) {
          this.isShow = true
        } else {
          this.isShow = false
        }
      } else if (this.type == 2) {
        this.info =
          this.currentYear + '年' + '第' + this.currentQuarter + '季度'
        if (this.quarter == this.currentQuarter) {
          this.isShow = true
        } else {
          this.isShow = false
        }
      } else {
        this.info = this.currentYear + '年'
        if (this.year == this.currentYear) {
          this.isShow = true
        } else {
          this.isShow = false
        }
      }
      // console.log(this.isShow)
      this.show_date = false
    },
    cancelTime() {
      // console.log('取消')
      this.show_date = false
    },
    showData() {
      this.show_date = true
    },
    // 路由跳转
    Jump(url, data) {
      // console.log(url)
      // console.log(data)
      this.$JumpPath(this, url, data)
    },
    goItemGroup(url) {
      window.location.href = url
    },

    // 数据请求
    getDhsGlj() {
      // console.log('this.timeData', this.timeData)
      const value =
        this.type == 1
          ? this.timeData.currentMonth
          : this.type == 2
            ? this.timeData.currentQuarter
            : ''

      const data = {
        value,
        year: this.timeData.currentYear
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      getDhsGlj(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.timeData.year = res.data.year_list
          this.timeData.month = res.data.month_list
          this.timeData.currentYear = res.data.year
          this.timeData.currentMonth = res.data.month
          this.timeData.quarter = res.data.quarter
          this.commission = res.data.detail.all_amount
          this.type = res.data.dhs_team_bonus_time_type
          this.lower_level_user_num = res.data.detail.lower_level_user_num
          this.reward = res.data.detail.reward
          this.group_link = res.data.group_link
          this.personal_consume = res.data.personal_consume
          this.is_cxsw_dz = res.data.is_cxsw_dz ? res.data.is_cxsw_dz : 0
          this.total_amount = res.data.detail.total_amount // 业绩
          this.total_level_amount = res.data.detail.total_level_amount // 平级业绩
          this.level_count = res.data.detail.level_count // 平级数量
        } else {
          this.$Error(res.msg)
        }
      })
    },

    // 获取当前月份和前三个月份
    getTime() {
      const time = new Date()
      const currentMonth = time.getMonth() + 1
      const currentYear = time.getFullYear()
      const currentQuarter = Math.ceil(currentMonth / 3)
      const item = [{ name: '本月', type: currentMonth, year: currentYear }]
      for (let i = 1; i <= 3; i++) {
        const month =
          currentMonth - i > 0 ? currentMonth - i : currentMonth - i + 12
        const year = currentMonth - i > 0 ? currentYear : currentYear - 1

        item.unshift({ name: month + '月', type: month, year: year })
      }
      // 当前年月
      this.currentYear = currentYear
      this.currentMonth = currentMonth
      this.currentQuarter = currentQuarter
      this.year = currentYear
      this.month = currentMonth
      this.quarter = currentQuarter
      this.items = item
      // console.log('item', item)
      // console.log(this.items)
      this.timeData.currentYear = currentYear
      this.timeData.currentMonth = currentMonth
      this.timeData.currentQuarter = currentQuarter
    }
  },
  components: {
    datePop
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/mixin";
@import "src/styles/user/yejiStyle/index";
.achievement {
  .achievement-header {
    .fontSty {
      color: #f30c23;
      margin-left: 48px;
      font-size: 28px;
      line-height: 60px;
    }
  }
}
</style>
